<template>
    <div class="ecology">
        <div v-if="ecologyShow">
            <van-nav-bar :title="$t('ecology.title')"/>
            <div class="headtitle">
                <div class="wordline">
                    <ul>
                        <li v-for="(item,index) in yqmlist"> {{$t('ecology.ct')}}{{item.invite_code.substr(0, 4)}}***{{item.invite_code.substr(7, 10)}}{{$t('ecology.jt')}}</li>
                        <!-- <li>sasasasa</li>
                        <li>sasasasa</li>
                        <li>sasasasa</li>
                        <li>sasasasa</li>
                        <li>sasasasa</li>
                        <li>sasasasa</li> -->
                    </ul>
                </div>
            </div>
            <div class="ecologyMain">
                <ul>
                    <li @click="lookDetail(index)" v-for="(item,index) in ecologyList" :style="{background: 'url(' + item.bac + ') no-repeat center','background-size':'contain'}">
                        <div class="posbg"></div>
                        <p>{{item.tip}}</p>
                        <span>{{item.btn}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div v-if="!ecologyShow">
            <router-view @_return="_return" @disappear="disappear"/>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ecologyList:[
                    {
                        tip:this.$t('ecology.market'),
                        btn:this.$t('ecology.market_remind'),
                        bac:require('../../assets/new3.png')
                    },
                    {
                        tip:this.$t('ecology.public'),
                        btn:this.$t('ecology.public_remind'),
                        bac:require('../../assets/new4.png')
                    },
                    {
                        tip:this.$t('ecology.money'),
                        btn:this.$t('ecology.money_remind'),
                        bac:require('../../assets/new1.png')
                    },{
                        tip:this.$t('ecology.nodeloan'),
                        btn:this.$t('ecology.nodeloan_remind'),
                        bac:require('../../assets/new2.png')
                    }
                ],
                ecologyShow:false,
                mine:{},
                yqmlist:[]
            }
        },
        methods: {
            _return(){
                this.$router.push('/home/ecology')
                this.ecologyShow = true
                this.$emit('tabDisappear',true)
                this.$emit('changeIndex',2)
            },
            disappear(){
                this.$emit('tabDisappear',false)
            },
            lookDetail(data){
                if(this.mine.status >= 2){
                    switch (data) {
                        case 0:
                            this.ecologyShow = false
                            // this.$router.push('/home/ecology/trade')
                            this.$router.push('/home/ecology/shop')
                            break;
                        case 1:
                            this.ecologyShow = false
                            // this.$router.push('/home/ecology/node')
                            this.$router.push('/home/ecology/welfare')
                            break;
                        case 2:
                            this.ecologyShow = false
                            // this.$router.push('/home/ecology/shop')
                            this.$router.push('/home/ecology/coin')
                            break;
                        case 3:
                            this.ecologyShow = false
                            // this.$router.push('/home/ecology/welfare')
                            this.$router.push('/home/ecology/nodeloan')
                            break;
                        case 4:
                            this.ecologyShow = false
                            // this.$router.push('/home/ecology/coin')
                            // this.$router.push('/home/ecology/nodeloan')
                            // this.$toast(this.$t('info.version'))
                            // return false
                            break;
                        case 5:
                            this.ecologyShow = false
                            this.$router.push('/home/ecology/nodeloan')
                            // this.$toast(this.$t('info.version'))
                            // return false
                            break;
                    }
                }else{
                    this.$toast(this.$t('info.active'))
                    return
                }

            },
            getData(){
                this.$api.post('user/getuserinfo')
                    .then(res =>{
                        console.log(res)
                        this.mine = res.detail
                    })
            },
        },
        created() {
            if(this.$route.path === '/home/ecology'){
                this.$emit('changeIndex',2)
                this.ecologyShow = true
            }
            this.getData()
            this.$api.get('/yqmlink')
                    .then(res =>{
                        console.log(res)
                        this.yqmlist=res.detail

                    })
        },
        mounted() {
    
        },
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
    back = linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%) !important
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .wordline{
        width :auto
        animation: 30s wordsLoop linear infinite normal;
    }
    .wordline li{
        font-size:16px;
            color:#666;
            display:inline;
            margin-left:20px;
            width:240px;
            color:#ff4400
    }
    .wordline li:first-child{
        margin-left:50px
    }
     @keyframes wordsLoop {
        0% {
            transform: translateX(200px);
            -webkit-transform: translateX(200px);

        }
        100% {
            transform: translateX(-2400px);
            -webkit-transform: translateX(-2400px);
        }
    }
    .ecologyMain
        width 94%
        margin 0 auto
        ul
            li
                margin-bottom 10px
                position relative
                height 170px
                overflow hidden
                background-size cover !important
                width 48.5%
                float left
                margin-right 3%
                background-position center
                border-radius 5px
                p
                    margin 55px 0 0 0px
                    font-size 20px
                    color #23ba92
                    z-index 13
                    position relative
                    text-align center
                span
                    color #FFFFFF
                    background rgba(255,255,255,.2)
                    border-radius 25px
                    padding 4px 10px
                    margin 20px 0 0 25px
                    display inline-block
                    z-index 13
                    position relative
            li:nth-child(2n)
                margin-right 0%
    .posbg
        width 100%
        height 100%
        background rgba(0,0,0,0.7)
        position absolute
        z-index 2
    .headtitle 
        height 40px
        width 95%
        margin-bottom 10px
        border 1px solid #ebebeb
        padding-left 20px
        padding-right 20px
        box-sizing border-box
        line-height 40px
        overflow hidden
        white-space: nowrap
        border-radius 10px
        margin-left 2.5%

</style>
